<template>
  <a-card :bordered="false">
    <a-tabs v-model="activeKey">
      <a-tab-pane
        key="0"
      >
        <span slot="tab">
			<a-icon type="contacts" />
      	 年度能耗统计报表
        </span>
        <ConsumptionTable ref="yearly" duration="yearly" v-if="activeKey === '0'" />
      </a-tab-pane>
      <a-tab-pane
        key="1"
      >
       <span slot="tab">
			<a-icon type="bar-chart" />
      	 季度能耗统计报表
        </span>
        <ConsumptionTable ref="quarterly" duration="quarterly" v-if="activeKey === '1'" />
      </a-tab-pane>
      <a-tab-pane
        key="2"
      >
       <span slot="tab">
			<a-icon type="area-chart" />
      	 月度能耗统计报表
        </span>
        <ConsumptionTable ref="monthly" duration="monthly" v-if="activeKey === '2'" />
      </a-tab-pane>
    </a-tabs>
  </a-card>
</template>

<script>
  import ConsumptionTable from './modules/ConsumptionTable'

  export default {
    name: 'F050502',
    components: { ConsumptionTable },
    data() {
      return {
        activeKey: '0',
      }
    },
    methods: {
      handleTabChange() {
        let key = this.activeKey;
        if (key === '0' && this.$refs.yearly) {
          this.$refs.yearly.loadData();
        } else if (key === '1' && this.$refs.quarterly) {
          this.$refs.quarterly.loadData();
        } else if (key === '2' && this.$refs.monthly) {
          this.$refs.monthly.loadData();
        }
      },
    }
  }
</script>